{extend name="layouts@base" /}
{block name="head"}
<!-- <link rel="stylesheet" href="__STATIC__/mobile/default/css/userData.css" /> -->

<style>
        .van-nav-bar{
        line-height: 46px !important;
    }
    .layui-form-label {
        width: unset;
    }

.layui-form select {
    display: block;
}

    .layui-form-select {
        margin-bottom: 0.1rem;
    }

    .re {
        position: relative;
        overflow: hidden;
        display: inline-block;
    }

    .uploadInput {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
    }

    .userimg {
        width: 1rem;
        height: 1rem;
    }
    .seauii  {
        -webkit-appearance: button;
    }

</style>
{/block}
{block name="main" }

<div class="page-bd userData" id="app">
    <!-- 页面内容-->
    <div class="layui-form bg m">
        <div class="layui-form-item">
        	<div class="layui-form-label">姓名</div>
            <div class="layui-input-block">
                <input name="name" class="layui-input" id="name" value="{$data.name}" placeholder="请输姓名">
            </div>
        </div>
        <div class="layui-form-item">
        	<div class="layui-form-label">手机号</div>
            <div class="layui-input-block">
                <input name="phone" class="layui-input" id="phone" value="{$data.phone}" placeholder="请输入手机号">
            </div>
        </div>

       <div class="layui-form-item">
           <div class="layui-form-label">代理级别</div>
           <div class="layui-input-block">
               <tr>
                   <td>
                       <div class="layui-unselect layui-form-select layui-form-select">
                           <div class="layui-select-title">
                               <select v-model="levels" class="seauii layui-input" name="type" id="type" @change="changeLevel">
                                   <option {if condition="isset($level_type) &&$level_type eq 1"}selected{/if}  value="1">省代理</option>
                                   <option {if condition="isset($level_type) &&$level_type eq 2"}selected{/if}  value="2">市代理</option>
                                   <option {if condition="isset($level_type) &&$level_type eq 3"}selected{/if}  value="3">区代理</option>
                                   <option {if condition="isset($level_type) &&$level_type eq 4"}selected{/if}  value="4">镇代理</option>
                               </select>
                           </div>
                       </div>
                       <br>
                   </td>
               </tr>
           </div>
       </div>
       <div class="layui-form-item">
        <div class="layui-form-label">选择区域</div>
        <div class="layui-input-block">
            <van-field style="border: 1px #e6e6e6 solid; padding: 10px 16px 10px 10px" v-model="fieldValue" label-width="0" readonly border  placeholder="请选择所在地区" @click="show = true"/>
       </div>
   </div>
       <div class="layui-form-item" v-if="goods_id">
            <div class="layui-form-label">商品展示</div>
            <div class="layui-input-block">
               
                <div style="margin-bottom: 10px"><span style="color:red;font-weight: bold">[ ￥{{shop_price}} ]</span> {{goods_name}} </div>
                <van-image width="100" height="100" :src="goods_img"/>
           </div>
       </div>
 

        <van-popup v-model="show" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择所在地区"
            :options="options"
            @close="show = false"
            @change="onChange"
            @finish="onFinish"
          />
        </van-popup>
        <div class="layui-form-item">
            <div class="layui-form-label">详细地址</div>
            <div class="layui-input-block">
                <textarea v-model="region_address" name="region_address" class="layui-textarea" id="region_address" value="{$data.region_address}" placeholder="请输入详细地址"></textarea>
            </div>
        </div>
    </div>
    <div class="page-ftb" @click="sumbitInfo">
        <input class="isbuy" id="isbuy" name="isbuy" value="{$isbuy}" type="hidden">
        <span class="fs32 color_w fw_b BGcolor_r editpwd" >确认申请</span>
    </div>
</div>


{/block}

{block name="footer"}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"/>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
      show: false,
      fieldValue: '',
      cascaderValue: '',
      options: [],
      levels: 1,
      goods_img: '',
      goods_name: '',
      goods_id: '',
      shop_price: 0,
      finallyArr: [],
      region_address: '',
      isbuy:1
  },
  created(){
      
    this.getAreaInfo(1)
  },
  methods:{
    
    
    // 提交
    sumbitInfo() {
        const name = $('input[name="name"]').val()
        const phone = $('input[name="phone"]').val()
        isbuy = $('input[name="isbuy"]').val();
        console.log(isbuy)
        if(name=='' || name == undefined){
            return _alert('请输入姓名.');
        }
        if(phone=='' || phone == undefined){
            return _alert('请输入手机号.');
        }
        
        if (this.finallyArr.length == 0) {
            return _alert('请选择区域.');
        }
        
        if(this.region_address==''){
            return _alert('请输入详细地址.');
        }
        
        const params = {
            name,
            phone,
            level: this.levels,
            region: this.finallyArr[this.finallyArr.length - 1].value,
            region_address: this.region_address
        }
        jq_ajax('{:url("member/center/add_user_region")}',params, (res) => {
            if (res.code == 0) {
                _alert(res.msg);
                return false;
            }
            
            if(isbuy == 0){
                var buyarr = new Object;
                buyarr.goods_id = this.goods_id;//对应商品id
                buyarr.specifications = 'undefined';
                buyarr.type = 'onbuy';
                buyarr.number = '1';
                var res = jq_ajax("{:url('shop/api.flow/addCart')}", buyarr);
                if (res.code == 1) {
                    window.location = '{:_url("shop/flow/checkout",array("rec_id"=>"【res.rec_id】"))}';
                    return false;
                }
                if (res.msg) _alert(res.msg,res.url);
            }else{
                jq_ajax("{:url('member/center/isbuyuporder')}");
                if (res.msg) _alert(res.msg,res.url);
            }
            setTimeout(window.location = '{:_url("member/center/index")}',5000);
            //  setTimeout(window.location = '{:_url("member/center/index")}',5000);
     
        })
    },
    
    // 改变等级
    changeLevel() {
        this.cascaderValue = ''
        this.fieldValue = ''
        this.finallyArr = []
        this.getAreaInfo(1)
    },
      
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
      this.finallyArr = selectedOptions
    },
    
    // 切换
    onChange({ value, selectedOptions, tabIndex }) {
        let indexArr = []
        if (tabIndex == 0) {
            const index = this.options.findIndex( item => item.value == value )
            indexArr.push(index)
        }else if(tabIndex == 1) {
            const parentIndex = this.options.findIndex( item => item.value == selectedOptions[0].value )
            const index = this.options[parentIndex].children.findIndex( item => item.value == value )
            indexArr.push(parentIndex, index)
        }else if(tabIndex == 2) {
            const parentIndex = this.options.findIndex( item => item.value == selectedOptions[0].value )
            const childindex = this.options[parentIndex].children.findIndex( item => item.value == selectedOptions[1].value )
            const index = this.options[parentIndex].children[childindex].children.findIndex( item => item.value == value )
            indexArr.push(parentIndex, childindex, index)
        }
        this.getAreaInfo(tabIndex + 2, value, indexArr)
    },
    
    // 获取省市区信息
    getAreaInfo(level, parent_code, indexArr){
        jq_ajax('{:url("member/api.users/getregion")}',{level, parent_code}, (res) => {
            if (level == 1) {
                this.options = res.data.map(item => {
                    const base = {text: item.PROVINCE_NAME, value: item.PROVINCE_CODE}
                    return this.levels == 1 ? base : Object.assign(base, {children: []})
                })
            }else if(level == 2){
                this.options[indexArr[0]].children = res.data.map(item => {
                    const base = {text: item.CITY_NAME, value: item.CITY_CODE}
                    return this.levels == 2 ? base : Object.assign(base, {children: []})
                })
            }else if(level == 3){
                this.options[indexArr[0]].children[indexArr[1]].children = res.data.map(item => {
                    const base = {text: item.AREA_NAME, value: item.AREA_CODE}
                    return this.levels == 3 ? base : Object.assign(base, {children: []})
                })
            }else if(level == 4){
                this.options[indexArr[0]].children[indexArr[1]].children[indexArr[2]].children = res.data.map(item => {
                    return {text: item.STREET_NAME, value: item.STREET_CODE}
                })
            }
            if (level == this.levels) {
                if (res.goods) {
                    const { goods_img, goods_name, goods_id, shop_price } = res.goods
                    this.goods_img = goods_img
                    this.goods_name = goods_name
                    this.goods_id =  goods_id
                    this.shop_price = shop_price
                }else{
                    this.goods_img ='' 
                    this.goods_name = '' 
                    this.goods_id =  ''
                    this.shop_price = 0
                }
            }

        }, 'GET')
    }
  }
})
</script>
<script type="text/javascript">
    /**
     * 获取城市
     * @param t  省份select对象
     */
    function get_city(t){
        // $('#city').css('display','block');
        var parent_id = $(t).val();
        if(!parent_id > 0){
            return;
        }
        $('#district').empty().css('display','none');
        $('#twon').empty().css('display','none');
        var url = 'getRegion?level=2&parent_id='+ parent_id;
        $.ajax({
            type : "GET",
            url  : url,
            error: function(request) {
                alert("服务器繁忙, 请联系管理员!");
                return;
            },
            success: function(v) {
                v = '<option value="0">选择城市</option>'+ v;
                $('#city').empty().html(v);
            }
        });
    }

    /**
     * 获取地区
     * @param t  城市select对象
     */
    function get_area(t){
        // $('#district').css('display','block');
        var parent_id = $(t).val();
        if(!parent_id > 0){
            return;
        }
        $('#district').empty().css('display','inline');
        $('#twon').empty().css('display','none');
        var url = 'getRegion?level=2&parent_id='+ parent_id;
        $.ajax({
            type : "GET",
            url  : url,
            error: function(request) {
                alert("服务器繁忙, 请联系管理员!");
                return;
            },
            success: function(v) {
                v = '<option value="0">选择区域</option>'+ v;
                $('#district').empty().html(v);
            }
        });
    }

</script>



{/block}
